<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript" src="js/jquery-3.6.0.min.js"></script>
		<script type="text/javascript">
			function add(){
    let hero = $("#hero").val();
    let nickname = $("#nickname").val();
    let hurt = $("#hurt").val();
    let proctet = $("#proctet").val();
    let count = $("tbody>tr").length+1;
    let rowItem = `<tr>
     <td>${count}</td>
     <td>${hero}</td>
     <td>${nickname}</td>
     <td>${hurt}</td>
     <td>${proctet}</td>
     <td><button type="button" onclick="del(this)">删除</button></td>
    </tr>`
    $("tbody").append(rowItem);
   }
   function del(btn){
    $(btn).parent().parent().remove();
   }
		</script>
	</head>
	<body>
		<form>
			入住人：<input type="text" name="" id="hero" value=""/>
			手机号：<input type="text" name="" id="nickname" value=""/>
			身份证：<input type="text" name="" id="hurt" value=""/>
			健康码：<input type="text" name="" id="proctet" value=""/>
			<button type="button" onclick="add()">添加</button>
		</form>
		<table border="1px" cellspacing="0" cellpadding="0">
			<thead>
				<th>序号</th>
				<th>入住人</th>
				<th>手机号</th>
				<th>身份证</th>
				<th>健康码</th>
				<th>操作</th>
			</thead>
			<tbody>
				<tr>
					<td>1</td>
					<td></td>
					<td></td>
					<td></td>
					<td></td>
					<td></td>
					
					<td><button type="button" onclick="del(this)">删除</button></td>
				</tr>
			</tbody>
		</table>
	</body>
</html>